<script setup>
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()

  // 自定义组件属性
  const scrollPageProps = defineProps({
    backgroundColor: {
      type: [String],
    },
    // 设置边框
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
    // 是否开启下拉刷新
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    // 设置当前下拉刷新状态
    refresherTriggered: {
      type: Boolean,
      default: false,
    },
  })

  // 自定义事件
  defineEmits(['refresherrefresh', 'scrolltolower'])
</script>

<template>
  <scroll-view
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: scrollPageProps.borderStyle,
      backgroundColor: scrollPageProps.backgroundColor,
    }"
    scroll-y
    :refresherEnabled="scrollPageProps.refresherEnabled"
    :refresherTriggered="scrollPageProps.refresherTriggered"
    @refresherrefresh="$emit('refresherrefresh', $event)"
    @scrolltolower="$emit('scrolltolower', $event)"
  >
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
